<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /*
    对象解构：对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
    基本语法：
        赋值运算符 = 左则的{}用于批量声明变量，右则对象的属性值将被赋值给左则的变量
        对象的属性值将被赋值给与属性名同名的变量
        解构的变量名不能和外面的变量名冲突否则报错
        对象中找不到与变量名一致的属性时变量的值为undefined 
     */

    const user = {
      name: "陶品奇",
      age: 22,
      getThis() {
        console.log(this);
      }
    }
    /*
      普通解构
      const { name, age,getThis} = user
      console.log(name, age);
      getThis()
    */
    /*
      解构并且重新命名
      const { name:userName, age:userAge,getThis:getUserThis} = user
      console.log(userName, userAge);
      getUserThis()
    */


    /*
    解构数组对象
      const pig = [
        { name: "佩奇", age: 6 }
      ]
      const [item] = pig
      console.log(item.name, item.age);
      const [{ name, age }] = pig
      console.log(name, age);
    */

    /*
    解构多级对象
     const pig={
       name:"佩奇",
       family:{
         mother:"猪妈妈",
         father:"猪爸爸",
         sister:"猪妈妈",
       }
     }
     const {name,family:{mother,father,sister}}=pig
     console.log(name,mother,father,sister);
    */

    /*
      解构多级数组对象
      const person = [
        {
          name: "佩奇",
          family: {
            mother: "猪妈妈",
            father: "猪爸爸",
            sister: "猪妈妈",
          }
        }
      ]
      const [{name,family:{mother,father,sister}}] = person
      console.log(name,mother,father,sister);
    */

  </script>
</body>

</html>